<%-- 
    Document   : index
    Created on : 14.12.2013, 15:01:36
    Author     : Evgeniy Grigorevskiy
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru">
    <head>
        <link type="text/css" rel="stylesheet" href="css/main.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="icon" href="img/logotypeForTitle.png" type="image/x-icon" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/myscript.js"></script>
        <title> | Social Library</title>
    </head>
    <body onkeyup="hotkeys(event)">

        <div class="registrationBlock"> 
            <div class="registrationForm">
                <div class="allFields">
                    <div> REGISTRATION </div>
                    <div class="field">
                        <label for="login">USERNAME<span style="color:red">*</span></label>
                        <input type="text" id="login" name="login" value="" />
                    </div>
                    <div class="field">
                        <label for="firstName">FIRST NAME<span style="color:red">*</span></label>
                        <input type="text" id="firstName" name="firstName" value="" />
                    </div>
                    <div class="field">
                        <label for="lastName">LAST NAME<span style="color:red">*</span></label>
                        <input type="text" id="lastName" name="lastName" value="" />
                    </div>
                    <div class="field">
                        <label for="eMail">E-MAIL<span style="color:red">*</span></label>
                        <input type="text" id="eMail" name="eMail" value="" />
                    </div>
                    <div class="field">
                        <label for="password">PASSWORD<span style="color:red">*</span></label>
                        <input type="password" id="password" name="password" value="" />
                    </div>
                    <div class="field">
                        <label for="confirmPassword">CONFIRM PASSWORD<span style="color:red">*</span></label>
                        <input type="password" id="confirmPassword" name="confirmPassword" value="" />
                    </div>
                    <div style="text-align: left"><span style="color:red">*</span> - required fields</div>
                    <div style="text-align: left">Password must have at least 6 symbols</div>
                </div>
                <div class="registrationCompleteButton">
                    <a href="#"><img id="toCompleteRegistrationButton"src="img/signIn.png"/></a>
                    <a href="#"><img id="CancelRegistration"src="img/Cancel.png"/></a>
                </div>
            </div>
        </div>

        <div class="addBooksBlock" > 
            <div class="addBooksForm">
                <div class="allFields">
                    <div> ADDING BOOK BY ITS ISBN</div>
                    <div class="field">
                        <label for="ISBN">ISBN<span style="color:red">*</span></label>
                        <input type="text" id="ISBN" name="ISBN" value="" />
                    </div>
                    <div class="field">
                        <label for="Genre">Genre<span style="color:red">*</span></label>
                        <select id="genreAddingBooks">
                            <option value="allgenres" disabled>choose genre</option>
                            <option value="drama">DRAMA</option>
                            <option value="fairy tale">FAIRY TALE</option>
                            <option value="fantasy">FANTASY</option>
                            <option value="folklore">FOLKLORE</option>
                            <option value="historical fiction">HISTORICAL FICTION</option>
                            <option value="horror">HORROR</option>
                            <option value="humor">HUMOR</option>
                            <option value="legend">LEGEND</option>
                            <option value="mystery">MYSTERY</option>
                            <option value="mythology">MYTHOLOGY</option>
                            <option value="poetry">POETRY</option>
                            <option value="realistic fiction">REALISTIC FICTION</option>
                            <option value="science fiction">SCIENCE FICTION</option>
                        </select>
                    </div>
                    <div><span style="color:red">*</span> - required fields</div>
                </div>

                <div class="addBooksCompleteButtons">
                    <a href="#"><img id="AddBook"src="img/addBookButton.png"/></a>
                    <a href="#"><img id="CancelBook"src="img/Cancel.png"/></a>
                </div>
            </div>
        </div>

        <div class="publishBlock"> 
            <div class="publishForm">
                <div class="allFields">
                    <div> Publish book to Global Library </div>
                    <div class="field">
                        <label for="isbnForPublish">ISBN<span style="color:red">*</span></label>
                        <input type="text" id="isbnForPublish" name="isbnForPublish" value="" />
                    </div>
                    <div style="text-align: left"><span style="color:red">*</span> - required fields</div>
                </div>
                <div class="publishBookCompleteButton">
                    <a href="#"><img id="toCompletePublishBookButton"src="img/publishButton.png"/></a>        
                    <a href="#"><img id="CancelPublishBook"src="img/Cancel.png"/></a>
                </div>
            </div>
        </div>

        <div class="deleteBlock"> 
            <div class="deleteForm">
                <div class="allFields">
                    <div> Delete book from Local Library </div>
                    <div class="field">
                        <label for="isbnForDelete">ISBN<span style="color:red">*</span></label>
                        <input type="text" id="isbnForDelete" name="isbnForDelete" value="" />
                    </div>
                    <div style="text-align: left"><span style="color:red">*</span> - required fields</div>
                </div>
                <div class="deleteBookCompleteButton">
                    <a href="#"><img id="toCompleteDeletingBookButton"src="img/deleteButton.png"/></a>       
                    <a href="#"><img id="CancelDeletingBook"src="img/Cancel.png"/></a>
                </div>
            </div>
        </div>

        <div class="banUserBlock"> 
            <div class="banUserForm">
                <div class="allFields">
                    <div> Ban user </div>
                    <div class="field">
                        <label for="userLoginForBan">User login</label>
                        <input type="text" id="userLoginForBan" name="userLoginForBan" value="" />
                    </div>
                    <div class="field">
                        <label for="userEmailForBan">User email</label>
                        <input type="text" id="userEmailForBan" name="userEmailForBan" value="" />
                    </div>
                </div>
                <div class="banUserCompleteButton">
                    <a href="#"><img id="toCompleteBanUserButton"src="img/banButton.png"/></a> 
                    <a href="#"><img id="CancelBanUserBook"src="img/Cancel.png"/></a>
                </div>
            </div>
        </div>

        <div class="errorListBlock"> 
            <div class="errorListForm">

                <div class="notificationHeader"> 
                    <div> 
                        <div><img src="img/errorImage.png"/></div> 
                        <div>Notification!</div> 
                    </div> 
                </div>
                <div class="errorMsg"></div>

                <div class="closeErrorListButton">
                    <a href="#"><img id="closeErrorListButton"src="img/OkButton.png"/></a>
                </div>
                <div class="clear"></div> 
            </div>
            <input id="forFocusing"/>
        </div>


        <div class="main">
            <!-- header-->
            <div class="header">

                <div class="logotype">
                    <img src="img/logo.png"/>
                </div>

                <div class="search">
                    <input type="text" name="search" value="" placeholder="Search book by it's ISBN-13" id="search"/>
                    <label for="search">
                        <img class="imgSearchButton" src="img/searchButton.png"/>
                    </label> 
                </div>

                <div class="clear"></div>
                <div class="greenLeaf">
                    <img class="leaf" src="img/leaf.png"/>
                </div>

            </div>

            <!-- Top Banner-->
            <div class="guest" id="topMenu" >

            </div>

            <!--main part-->
            <div class="mainPart"> 
                <div class="left">

                    <div class="signIn">

                    </div>

                    <div class="filters" id="filterOne">
                        <ul>
                            <li><a class="currentFilterValue" id="new"><div>NEW COMERS</div></a></li>
                            <li><a id ="popular"><div>POPULAR</div></a></li>
                            <li><a id="alphabet"><div>BY ALPHABET</div></a></li>
                        </ul>

                        <div class="clear"></div>
                    </div>
                    <div class="filters" id="filterTwo">
                        <ul>
                            <li><a class="currentFilterValue" id="all genres" onclick="filterTwo(this)"><div>ALL GENRES</div></a></li>
                            <li><a id="drama" onclick="filterTwo(this)"><div>DRAMA</div></a></li>
                            <li><a id="fairy tale" onclick="filterTwo(this)"><div>FAIRY TALE</div></a></li>
                            <li><a id="fantasy" onclick="filterTwo(this)"><div>FANTASY</div></a></li>
                            <li><a id="folklore" onclick="filterTwo(this)"><div>FOLKLORE</div></a></li>
                            <li><a id="historical fiction" onclick="filterTwo(this)"><div>HISTORICAL FICTION</div></a></li>
                            <li><a id="horror" onclick="filterTwo(this)"><div>HORROR</div></a></li>
                            <li><a id="humor" onclick="filterTwo(this)"><div>HUMOR</div></a></li>
                            <li><a id="legend" onclick="filterTwo(this)"><div>LEGEND</div></a></li>
                            <li><a id="mystery" onclick="filterTwo(this)"><div>MYSTERY</div></a></li>
                            <li><a id="mythology" onclick="filterTwo(this)"><div>MYTHOLOGY</div></a></li>
                            <li><a id="poetry" onclick="filterTwo(this)"><div>POETRY</div></a></li>
                            <li><a id="realistic fiction" onclick="filterTwo(this)"><div>REALISTIC FICTION</div></a></li>
                            <li><a id="science fiction" onclick="filterTwo(this)"><div>SCIENCE FICTION</div></a></li>                       
                        </ul>

                        <div class="clear"></div>
                    </div>

                    <div class="subscription">
                        <div>
                            <label for="subscript">E-MAIL SUBSCRIPTION </label>
                            <input type="text" id="subscript" name="subscript" value="" />
                        </div>
                        <div>
                            <img class="signUpButton" src="img/signUp.png"/>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>

                <div class="right">
                    <div class="typeOfViewAndLibrary">
                        <div class="librarySwitch">

                        </div>
                        <div class="viewSwitch">
                            <a href="#"><img  class="viewSwitchFirstImg" id="gridButton" src="img/viewGrid.png"/></a>
                            <a href="#"><img  class="viewSwitchImg" id="smallListButton" src="img/viewSmallLines.png"/></a>
                            <a href="#"><img  class="viewSwitchImg" id="bigListButton" src="img/viewBigLines.png"/></a>
                        </div>
                        <div class="clear"></div>
                    </div>                   
                    <div class="grid" id="content">
                        <div id="contentWrapper">
                            <img src ="img/preloader.GIF"/>

                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="pagination">
                        <div class="forArrowPagination"></div>
                        <span id="left">
                            <a href="#"><img src="img/left.png"></a>
                        </span>
                        <span id="currentPage">1</span>
                        <span id="right">
                            <a href="#"><img src="img/right.png"></a>
                        </span>
                    </div>

                </div>
                <div class="clear"></div>
            </div>

            <div class="footer"> 
                <div class="footerMenu">
                    <ul>
                        <li><a href="#" id="footerAbout">ABOUT</a></li>
                        <li><a href="#" id="footerSupport">SUPPORT</a></li>
                        <li><a href="#" id="footerContacts">CONTACT US</a></li>
                    </ul>
                    <div class="clear"></div>
                </div>
                <label> &#169 2013-2014 Social Library Media. All rights reserved. </label>
                <div class="clear"></div>
            </div>
        </div>  
    </body>
</html>
